import React, { Component } from 'react';
import {bindActionCreators} from "redux";
import {connect} from "react-redux";
import {Link } from 'react-router';
import classnames from 'classnames';
import {Svg, Empty} from "src/components/common";
import {Cell, Input,Tab, Icon,Button,Picker,StaticToast} from 'pjh-mobile-ui';
import { mValidate,mFormat,mFetch,minHistory,mScript} from 'min-bridge';
import actions from "src/store/actions";

import './Apply.scss';
// import District from './pjh_area_mobile';


class Apply extends Component {
	constructor(props) {
			super(props);
			let {draftType,draftId}=props.location.query;
			this.state = {
				draftType:(draftType||"1"),
				draftId:(draftId||""),
				enterpriseName:'',
				contactsName:'',
				phone:'',
				tradingCity:'',
				draftPrice:'',
				explain:'',
				btnFlag:false,

				CascaderPicker: false,
      	sValue: [],
				disabled: false,
				District:[]
			}
			this.flag=false;
			this.SET=this.SET.bind(this);
	}
	componentWillMount(){
		mScript("http://oupteb82y.bkt.clouddn.com/js/pjh_area_mobile.js?v=1",(js)=>{
			this.setState({
				District:window.district
			})
		})
	}
	SET(e){
		let {name,value} = e.target;
		this.setState({
			[`${name}`]:value
		});
	}
	validate(){
		let {draftId,enterpriseName,contactsName,phone,tradingProvince,tradingCity,draftPrice,explain,draftType,sValue}=this.state;
		let reg =/[@#\$%\^&\*]+/g;
		if(!mValidate.isNotEmpty(enterpriseName)){
			StaticToast.error("请输入您的公司名称");
			return false;
		}else if(reg.test(enterpriseName)){
			StaticToast.error("不能输入特殊字符");
			return false;

		}else	if(!mValidate.isNotEmpty(contactsName)){
			StaticToast.error("请输入联系人姓名");
			return false;
		}else if(!mValidate.isUsername(contactsName)){
			StaticToast.error("请输入正确的姓名");
			return false;
		}else	if(!mValidate.isNotEmpty(phone)){
			StaticToast.error("请输入您的手机号码");
			return false;
		}else if(!mValidate.isMobile(phone)){
			StaticToast.error("请输入正确的手机号码");
			return false;
		}else	if(!sValue.length){
			StaticToast.error("请选择交易城市");
			return false;
		};
		if(this.flag){return false;};
		this.flag=true;
		mFetch.fetchJson({
			data:{
				method:"enterprise.collaborateApply",
				bizContent: {
					draftId,
				enterpriseName,contactsName,phone,
				tradingCity:sValue.join("-"),draftPrice,explain
				},
			},
			success:res=>{
				if(res.code == "0000"){
					StaticToast.success("提交成功");
					setTimeout(()=>{
						minHistory.push({pathname:"/app/draft"});
					},2000);
				}else{
					StaticToast.error(res.message);
				};
				this.flag=false;
			},
			error:err=>{
				this.flag=false;
			}
		});
	}

	render() {
		let {enterpriseName,contactsName,phone,tradingProvince,tradingCity,draftPrice,explain,draftType}=this.state;
			return (
			<div className="draft-apply">
				<h3 className="tit-3">请填写意向申请表</h3>
				<section className="form mb10">
					<Cell title="公司名称">
					  <Input type="text" placeholder="请输入公司名称" value={enterpriseName} name="enterpriseName" onChange={(e)=>this.SET(e)} />
					</Cell>
					<Cell title="联系人姓名">
					  <Input type="text" placeholder="请输入联系人姓名" value={contactsName} name="contactsName" onChange={(e)=>this.SET(e)} />
					</Cell>
					<Cell title="手机号码">
					  <Input type="tel" placeholder="请输入手机号码" value={phone} name="phone" onChange={(e)=>{this.setState({phone:(e.target.value.replace(/\D/g,''))})}} maxLength="11"  />
					</Cell>
					<Cell title="交易城市" type="select">
					  <Picker
					  	className="test"
              visible={this.state.CascaderPicker}
              title="请选择"
              placeholder="请选择"
              format="-"
              disabled={this.state.disabled}
              dataSource={this.state.District}
              cols={2}
              displayMember="label"
              valueMember="label"
              value={this.state.sValue}
              onChange={v => this.setState({ sValue: v })}
              onOk={(v) => {
              	if(v[0]=="0000"){
              		this.setState({
	                  sValue: [],
	                });
              	};
              }}
              onCancel={() => {
              }}
              />
					</Cell>
				</section>
				{
					draftType==2?(
						<div className="purpose">
							<p className="label">意向说明</p>
						  <Input type="textarea" rows="5" value={explain} name="explain" onChange={(e)=>this.SET(e)} placeholder="请输入您持有的票据信息，换票要求" maxLength="126" />
						</div>
					):(
						<Cell className="interest" title="票据价格(月息）" description="‰">
						  <Input type="number" placeholder="请输入月息" value={draftPrice} name="draftPrice" onChange={(e)=>{this.setState({draftPrice:mFormat.figure(e.target.value)})}} maxLength="40"/>
						</Cell>
					)
				}
        <div className="handler">
					<Button radius theme="info" block onClick={()=>this.validate()}>提交意向</Button>
				</div>
			</div>
			);
	}
}



export default Apply;